<template>
  <HeadContainer class="mine-settings-delete-account" :title="$t('title.delAcc')" @back="back">
    <div class="gap-col-16">
      <div>
        <div class="font-size-12 font-weight-400 line-height-120">
          {{ $t('content.delAcc.line1') }}
          <span class="text-primary-x">{{ $t('content.delAcc.line2') }}</span>
        </div>
        <div class="font-size-12 font-weight-400 line-height-120">
          {{ $t('content.delAcc.line3') }}
          <a :href="'mailto:' + SUPPORT_MAIL" class="text-primary">{{ SUPPORT_MAIL }}</a>
        </div>
      </div>
      <form>
        <div class="mb-4 d-flex flex-column">
          <InputWrap
            v-model="form.oldPW.value"
            :errMsg="form.oldPW.error"
            :label="$t('label.oldPw')"
            :placeholder="$t('placeholder.oldPw')"
            password
          ></InputWrap>
        </div>
      </form>
      <v-divider></v-divider>
      <div class="mt-4">
        <div class="d-flex gap-row-16">
          <div @click="back" class="cancel-light-btn w-100 d-flex justify-center align-center">
            {{ $t('common.cancel') }}
          </div>
          <div @click="onSave()" class="primary-btn w-100 d-flex justify-center align-center">
            {{ $t('common.confirm') }}
          </div>
        </div>
      </div>
      <div v-if="saveErrMsg" class="text-start err-msg font-size-14 font-weight-400 line-height-120 text-primary-x">
        {{ saveErrMsg }}
      </div>
    </div>
    <!-- 先不做 -->
    <!-- <div @click="toMineLegalPD">Download your personal data</div> -->
  </HeadContainer>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onKeyStroke } from '@vueuse/core'
import { useAccountStore } from '@/store/account'
import { usePopupDialogStore } from '@/store/popup-dialog'
import { $t } from '@/i18n'
import { useYup, validate } from '@/plugins/yup'
import InputWrap from '@/components/form/InputWrap.vue'
import HeadContainer from '@/components/layout/HeadContainer.vue'
import { SUPPORT_MAIL } from '@/constant'
import API from '@/http'

const emits = defineEmits(['toPage'])

function back() {
  emits('toPage', 2, 'settings')
  form.oldPW.value = ''
  form.oldPW.error = ''
  form.oldPW.check = false
}

const { $confirm } = usePopupDialogStore()

const form = reactive({
  oldPW: {
    value: '',
    error: '',
    check: false,
  },
})

const yup = useYup()
const schemaOldPw = yup.string().required().min(8)
const saveErrMsg = ref('')

const onSave = () => {
  const validateOldPw = validate(schemaOldPw, form.oldPW)

  Promise.all([validateOldPw]).then(() => {
    if (form.oldPW.check) {
      console.log('前端验证通过')

      const confirmOptions = {
        title: $t('title.delAcc'),
        content: $t('content.delAcc.delAccPopTitle'),
        confirm: async () => {
          try {
            await delAcc()
            const { logout: logoutAccount } = useAccountStore()
            logoutAccount()
            emits('toPage', 1, 'mine')
          } catch (error) {
            console.log('删除账户失败', error)
          }
        },
        cancel: () => {
          console.log('按下取消')
        },
      }

      $confirm(confirmOptions).open()
    } else {
      console.log('前端验证未通过')
    }
  })
}

const delAcc = async () => {
  try {
    const data = {
      password: form.oldPW.value,
    }
    await API.Auth.delete({ data })
    console.log('這是data', data)
    saveErrMsg.value = ''
  } catch (e) {
    saveErrMsg.value = e.message
    throw e
  }
}

onKeyStroke('Enter', onSave)
</script>
